<template>
    <div class="list-box" ref="listBox">
      <!-- 搜索区-->
      <div class="list-search">
        <el-button type="primary" class="list-search-right" @click="dialogForm = true">新增栏目</el-button>
      </div>
      <!--列表区-->
      <div class="list-table">
        <el-table :data="tableData" border :style="{width: '100%'}" v-loading="loading" :height="clientHeight">
          <el-table-column prop="cId" label="ID" width="100"></el-table-column>
          <el-table-column prop="columnTitle" label="标题"></el-table-column>
          <el-table-column prop="columnSubTitle" label="副标题" width="300"></el-table-column>
          <el-table-column prop="orderNo" label="位置排序" width="100"></el-table-column>
          <el-table-column prop="loadPage" label="加载顺序" width="100"></el-table-column>
          <el-table-column prop="defaultCount" label="默认加载条数" width="120"></el-table-column>
          <el-table-column label="是否外链" width="200">
            <template slot-scope="scope">
              <p>{{scope.row.outLink==='1'?'是':'否'}}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="onClickOpenChange(scope.row)">修改</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--新增\修改弹窗-->
      <el-dialog title="栏目信息" :visible.sync="dialogForm" @close="onClickClose" class="list-dialog" :close-on-click-modal="false" width="60%">
        <el-form :model="form" label-width="120px" :rules="rules" ref="setList">

          <el-divider content-position="left">配置</el-divider>
          <el-form-item label="位置排序" class="list-dialog-inline" prop="orderNo">
            <el-input-number v-model="form.orderNo" controls-position="right" placeholder="必填，请输入整数"></el-input-number>
          </el-form-item>
          <el-form-item label="加载顺序" class="list-dialog-inline" prop="loadPage">
            <el-input-number v-model="form.loadPage" controls-position="right" placeholder="必填，请输入整数"></el-input-number>
          </el-form-item>
          <el-form-item label="默认加载条数" class="list-dialog-inline" prop="defaultCount">
            <el-input-number v-model="form.defaultCount" controls-position="right" placeholder="必填,请输入正整数"></el-input-number>
          </el-form-item>

          <el-divider  content-position="left" class="list-dialog-divider">栏目详情</el-divider>
          <el-form-item label="主标题" class="list-dialog-input list-dialog-inline" prop="columnTitle">
            <el-input v-model="form.columnTitle" autocomplete="off" placeholder="必填，字数限制100汉字" maxlength="100" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="副标题" class="list-dialog-input list-dialog-inline">
            <el-input v-model="form.columnSubTitle" autocomplete="off" placeholder="必填，字数限制100汉字" maxlength="100" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="栏目链接" class="list-dialog-input" style="display: block">
            <upload-oss :file="form.columnPic" @change="changeOss"></upload-oss>
            <!--<el-input v-model="form.columnPic" autocomplete="off" placeholder="选填，图片大小请控制在2M以内"></el-input>-->
          </el-form-item>
          <el-form-item label="标签页" class="list-dialog-input">
            <el-input v-model="form.tabs" autocomplete="off" placeholder="选填，多个标签请用英文“,”隔开"></el-input>
          </el-form-item>
          <el-form-item label="是否外链" class="list-dialog-input">
            <el-switch
              v-model="form.outLink"
              active-text="是"
              inactive-text="否"
              active-value="1"
              inactive-value="0"
              @change="changeLink">
            </el-switch>
          </el-form-item>
          <el-form-item label="外链链接" class="list-dialog-input list-dialog-inline">
            <el-input v-model="form.columnUrl" autocomplete="off" placeholder="选填"></el-input>
          </el-form-item>
          <el-form-item label="appId" class="list-dialog-input list-dialog-inline">
            <el-input v-model="form.appId" autocomplete="off" placeholder="选填"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogForm = false">取 消</el-button>
          <el-button type="primary" @click="onClickSetList">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import uploadOss from './UploadOss'
    export default {
        name: "columnList",
      props:{
        clientHeight:{
          type:String
        }
      },
      components:{
        uploadOss
      },
      data(){
        return{
          input:'',
          tableData:[],
          form:{columnPic : []},
          loading:false,//是否开启加载
          dialogForm:false,//新增、修改窗口显示
          rules:{
            columnTitle:[
              { required: true, message: '请输入主标题', trigger: 'blur' },
              {max:100,message: '主标题字数限制100汉字', trigger: 'blur' }],
            orderNo:[{ required: true, message: '请输入位置排序', trigger: 'blur' }],
            loadPage:[{ required: true, message: '请输入加载顺序', trigger: 'blur' }],
            defaultCount:[{ required: true, message: '请输入默认加载条数', trigger: 'blur' }],
          }
        }
      },
      created(){
        this.getUserList();
      },
      methods:{
        //获取栏目列表
        getUserList(){
          this.loading = true;
          this.$axios.getColumnList().then(res=>{
            //console.log(res.data.data);
            if (res.data.code==='0'){
              this.tableData = res.data.data;
              let t = setTimeout(()=>{
                this.loading = false;
                clearTimeout(t);
              },500)
            }else{
              this.$message.error('获取列表失败！');
            }
          })
        },
        //打开修改窗口
        onClickOpenChange(row){
          this.$axios.getColumnById({
            "cId":row.cId
          }).then((res)=>{
            //console.log(res)
            if (res.data.code==='1') return;
            let list = res.data.data[0];
            list.columnPic = list.columnPic?[{url:list.columnPic}]:[];
            this.form = list;
          }).catch((err)=>{
            this.$message.error('连接服务器失败！')
          })
          this.dialogForm = true;
        },
        //关闭新增、修改窗口
        onClickClose(){
          this.form = {
            columnPic : []
          };
        },
        //新增、修改提交
        onClickSetList(){
          //console.log(this.form);
          this.$refs['setList'].validate((valid)=>{
            if(valid){
              let form = this.form;
              this.$axios.setColumn({
                "cId":form.cId?form.cId:'0',
                "columnTitle":form.columnTitle,
                "columnSubTitle":form.columnSubTitle?form.columnSubTitle:'',
                "columnPic":form.columnPic.length=='0'?'':form.columnPic[0].url,
                "outLink":form.outLink,
                "columnUrl":form.columnUrl?form.columnUrl:'',
                "appId":form.appId?form.appId:'',
                "loadPage":form.loadPage,
                "orderNo":form.orderNo,
                "tabs":form.tabs?form.tabs:'',
                "defaultCount":form.defaultCount
              }).then((res)=>{
                if (res.data.code==='0'){
                  this.$message.success(this.form.userId?'修改成功！':'添加成功！');
                  this.getUserList();
                  this.$emit('changeList');
                  this.dialogForm = false;
                }else {
                  this.$message.error('添加或修改失败！');
                }
              })
            }
          })
        },
        //改变外链时
        changeLink(n){
          this.form.outLink = n;
        },
        //修改图片后执行
        changeOss(fileList){
          let file = fileList;
          if (file.length!='0'){file[0].url = file[0].url.replace('http://','https://');}
          this.form.columnPic = file;
        },
      }
    }
</script>

<style scoped lang="scss">
  .list-box{
    background: #fff;
    height: 100%;
    width: 100%;
    padding: 30px;
    .list-search{

    }
    .list-table{
      width: 100%;
      margin: 30px 0;
    }
    .list-pagination{
      float: right;
    }
    .list-dialog-input{
      width: 500px;
    }
    .list-dialog-inline{
      display: inline-block;
    }
    .list-dialog-divider{
      margin-top: 50px;
    }
  }

</style>
